<template>
  <div class="verbalView" :style="{
      height: datas.length > 8 ? 'calc(100% - 90px)' : 'calc(100vh - 90px)',
    }">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-if="datas.length > 0" class="vanList" finished-text="没有更多了" :immediate-check="false" v-model="loading" :finished="finished" finished-span="没有更多了" @load="onLoad">
        <!-- <div class="card" v-for="(item, index) in datas" :key="index" @click="clickColor(item)">
          <div class="title line2">
            <i style="
                width: 5px;
                flex-shrink: 0;
                height: 5px;
                border-radius: 50%;
                background-color: #e4881e;
                margin-top: 12px;
                margin-right: 5px;
                display: inline-block;
              "></i>
            <div class="topState" v-if="item.topState && item.topState == 1">
              置顶
            </div>
            <span class="miaosadsa">{{ item.title }}</span>
          </div>
          <p style="color: #aaa" class="miaos">
            {{ item.content.data }}
          </p>
          <div class="footer">
            <div>
              <span style="margin-right: 5px"> {{ item.refreshTime }}</span>
              {{
                userMaps[item.userId]
                  ? userMaps[item.userId].nickname || userMaps.nickname
                  : ""
              }}
            </div>
          </div>
          <div class="other" @click.stop="createContent(item)">
            <template v-if="$route.name == 'ChatBarShare'">
              <img style="width: 0.28rem; margin-right: 5px" src="../../../public/img/icon/send.png" alt="" />
              <span class="shareText">发送</span>
            </template>
            <template v-else>
              <img style="width: 0.2rem; margin-right: 3px" src="../../../public/img/icon/Copy.png" alt="" />
              <span class="shareText">复制</span>
            </template>
          </div>
        </div> -->

        <div class="card-s" v-for="(item, index) in datas" :key="index">

          <div v-for="(i,inx) in item.content" :key="inx">
            <div v-if="inx == 0">
              <i class="i" style="
         
              "></i>
              <span class="title-box" v-if="inx == 0">{{item.title}}</span>
              <div class="date-box" v-if="inx == 0">
                <span style="margin-right: 5px"> {{ item.refreshTime }}</span>
                {{
                userMaps[item.userId]
                  ? userMaps[item.userId].nickname || userMaps.nickname
                  : ""
              }}
              </div>
            </div>

            <div class="item" v-if="downMap[index]">

              <div>
                <!-- 点击发送 -->
                <div @click="sendQv(i)" style="display:inline-block;margin-right:0.208rem">
                  <img style="width: 0.28rem; margin-right: 5px" src="../../../public/img/icon/send.png" alt="" />
                </div>
                <!-- 内容 -->
                <div style="display:inline-block">
                  <!-- 文字 -->
                  <div v-if=" i.type == 0  " class="text">{{i.data}}</div>
                  <!-- 图片 -->
                  <div v-if="i.type == 1 " class="img"><img :src="i.data" alt=""></div>
                  <!-- 视频 -->
                  <div v-if="i.type== 11 " class="link">
                    <img class="img" :src="i.data.portrait" alt="">
                    <div class="right-box">
                      <div>{{i.data.title}}</div>
                      <p>{{i.data.shareTitle}}</p>
                    </div>
                  </div>
                  <!-- 彩页 -->
                  <div v-if="i.type== 8 " class="link">
                    <img class="img" :src="downMap[index]['i' + i.data].thumb" alt="">
                    <div class="right-box">
                      <div>{{downMap[index]['i' + i.data].title}}</div>
                      <p>{{downMap[index]['i' + i.data].description}}</p>
                    </div>
                  </div>
                  <!-- 文档 -->
                  <div v-if="i.type== 12 " class="link">
                    <img class="img" :src="`https://dist.jiain.net/itr/dom/svg_type_${i.data.fileSuffix}.png`" />
                    <div class="right-box">
                      <div>{{i.data.title}}</div>
                      <p>{{i.data.localFileName}}</p>
                    </div>
                  </div>
                  <!-- 链接 -->
                  <div v-if="i.type== 13 " class="link">
                    <img class="img" :src="i.data.portrait" alt="">
                    <div class="right-box">
                      <div>标题达瓦哒哒哒顶顶顶顶顶顶大大大顶顶顶顶顶顶顶顶顶顶</div>
                      <p>内容</p>
                    </div>
                  </div>
                </div>
                <span class="right-bottom" style="">
                  <span v-if="i.type == 0"> 文字</span>
                  <span v-if="i.type==1">图片</span>
                  <span v-if="i.type==8">彩页</span>
                  <span v-if="i.type== 11 ">视频</span>
                  <span v-if="i.type== 12 ">文档</span>
                </span>
              </div>
            </div>
          </div>
          <div class="last-box" @click="show(index,item)">
            <van-icon v-if="!downMap[index]" name="arrow-down" />
            <van-icon v-else name="arrow-up" />
          </div>
          <button class="button" @click="allSend(item)">发送</button>
        </div>

      </van-list>
      <van-empty v-else-if="configs.empty" class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无相关消息" />
    </van-pull-refresh>
    <!-- <share :ShareContents="ShareContent" v-show="showShare" :showShares.sync="showShare"></share> -->
    <!-- <van-popup v-model="editPop" closeable round :style="{ width: '80%', height: '70%' }">
      <div style="padding: 0 10px; padding-top: 20px">编辑话术</div>
      <van-field v-model="message" rows="8" type="textarea" placeholder="请编辑....." show-word-limit style="padding-top: 40px; height: 70%" />
      <van-button type="primary" class="editBtn" color="#FE4754" block @click="sendWx">确认</van-button>
    </van-popup> -->
  </div>
</template>

<script>
import share from '../share'
import wxxx from '../../uilts/wxconfig'
import { generateTimeout, generateSignature, generateSignature8, generateNonce, generateSignature3, generateSignature4 } from "../../uilts/tools"
import { isQyweixin } from '../../uilts/qywxconfg'
let timeout = generateTimeout()
let nonce = generateNonce()
import local from '../../uilts/localStorage'
export default {
  name: "VerbalView",
  components: { share },
  props: ['datas', 'userMaps', 'configs', 'states'],
  data () {
    return {
      loading: false,
      finished: false,
      showShare: false,
      refreshing: false,
      ShareContent: {},
      editPop: false,
      message: '',
      downUp: false,
      downUps: null,
      downMap: {},
      query: {
        type: null,
        text: {
          content: ''
        },
        news: {
          link: "", //H5消息页面url 必填
          title: "", //H5消息标题
          desc: "", //H5消息摘要
          imgUrl: "", //H5消息封面图片URL
        },
        look: ''
      }

    }
  },
  watch: {},
  computed: {},
  created () {
    console.log(this.datas, '数据', 123)
  },
  mounted () {

  },
  methods: {
    look () {


      this.look = isQyweixin()
      console.log(this.look)
    },
    onLoad () {
      if (this.configs.current >= this.configs.total) {
        this.finished = true
        return
      }
      if (this.states == 'list') {
        this.$emit('mySonChagne', this.configs.current) // 触发爷组件方法更新数据下一页
      } else {
        let cur = ++this.configs.current
        this.$emit('onSearch', cur) // 触发爷组件方法更新数据下一页

      }
      setTimeout(() => {
        this.loading = false
      }, 1800)
    },
    onRefresh () {
      this.$emit('refreshEmpty')
      this.finished = false
      this.loading = true
      setTimeout(() => {
        this.refreshing = false
      }, 1000)
      this.onLoad()
    },
    clickColor (item) {
      console.log(item, 'itemitemitem')
      console.log(this.userMaps, item.userId, '12312321321321')
      this.$router.push({
        name: 'VerBalDetail',
        params: {
          user: this.userMaps[item.userId],
          item,
        }
      })
    },
    // 群发
    allSend(item){
      if(  this.look == 'pcweb'){
      console.log(item,'群发');
      }else {
        this.$toast('移动端暂不支持群发!')
      }
    },
    // 点击发送
    createContent (item) { //send
      let temp = item.title
      let content = item.content
      if (content) {
        content.forEach((item) => {
          temp += '\n' + item.data
        })
      }
      if (sessionStorage.getItem('Single')) { //单聊模式发送  正常模式赋值
        this.editPop = true
        this.message = temp
      } else {
        wx.setClipboardData({
          data: temp,
          success: (res) => {
            this.$toast('复制成功')
          },
          fail: (res) => {
            console.log(res, '失败')
            this.$toast('复制成功')
          }
        })
      }

    },
    sendWx () {  // 企业微信发送
      wx.invoke('sendChatMessage', {
        msgtype: "text", //消息类型，必填
        text: {
          content: this.message, //文本内容
        },
      }, function (res) {
        console.log('服务指引返回结果', res)
        if (res.err_msg == 'sendChatMessage:ok') {
          //发送成功
          console.log('发送成工')
        }
      })
    },
    close () {
      this.query = {
        type: null,
        text: {
          content: ''
        },
        news: {
          link: "", //H5消息页面url 必填
          title: "", //H5消息标题
          desc: "", //H5消息摘要
          imgUrl: "", //H5消息封面图片URL
        }
      }
    },
    // 企微发送
    sendQv (val) {
      // console.log(val, '发送的数据')
      if (val.type == 0) {
        this.query.type = "text"
        this.query.text.content = val.data
      } else if (val.type == 1) {
        return this.$toast('暂不支持分享')
      }
      else if (val.type == 8) {  // 彩页
        this.query.type = "news"
        this.query.news.link = `https://page.weishang99.net/itver/page/${val.data}/${this.$U || local.U()}`
        this.query.news.desc = '一条彩页'
        this.query.news.title = '彩页'
        this.query.news.imgUrl = `https://dist.jiain.net/itr/dom/svg_type_${val.data.fileSuffix}.png`
      } else if (val.type == 11) { // 视频
        return
        this.query.type = "news"
        this.query.news.link = val.data.shareUrl
        this.query.news.desc = val.data.desc
        this.query.news.title = val.data.title
        this.query.news.imgUrl = `https://dist.jiain.net/itr/dom/svg_type_${val.data.fileSuffix}.png`
      }
      else if (val.type == 12) { // 文档
        this.query.type = "news"
        this.query.news.link = val.data.shareUrl
        this.query.news.desc = val.data.localFileName
        this.query.news.title = val.data.title
        this.query.news.imgUrl = `https://dist.jiain.net/itr/dom/svg_type_${val.data.fileSuffix}.png`
      }
      console.log(this.query)
      this.sendWxs()
      this.close()
      console.log(this.query)
    },
    sendWxs () {
      console.log(wx, "wx obj")
      wx.invoke('sendChatMessage', {
        msgtype: "text", //消息类型，必填
        enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
        text: {
          content: "66666", //文本内容
        },
        // image:
        // {
        //   mediaid: "", //图片的素材id
        // },
        // video:
        // {
        //   mediaid: "", //视频的素材id
        // },
        // file:
        // {
        //   mediaid: "", //文件的素材id
        // },
        // news:
        // {
        //   link: this.query.news.link, //H5消息页面url 必填
        //   title: this.query.news.title, //H5消息标题
        //   desc: this.query.news.desc, //H5消息摘要
        //   imgUrl: this.query.news.imgUrl, //H5消息封面图片URL
        // },
        // miniprogram:
        // {
        //     appid: "wx8bd80126147df384",//小程序的appid
        //     title: "this is title", //小程序消息的title
        //     imgUrl:"https://search-operate.cdn.bcebos.com/d054b8892a7ab572cb296d62ec7f97b6.png",//小程序消息的封面图。必须带http或者https协议头，否则报错 $apiName$:fail invalid imgUrl
        //     page:"/index/page.html", //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
        // },
      }, function (res) {
        if (res.err_msg == 'sendChatMessage:ok') {
          //发送成功
          console.log('成果了')
        }
      })
    },
    // 右上角展示
    show (num, item) {
      if (this.downMap[num]) {
        delete this.downMap[num]
        this.$forceUpdate()
      } else {
        let signature = generateSignature3(
          item.id,
          this.$U || local.U(),
          this.$C || local.C(),
          timeout,
          nonce,
        )

        let request = {
          id: item.id,
          compId: this.$C || local.C(),
          userId: this.$U || local.U(),
          signature,
          timeout,
          nonce
        }
        let that = this
        this.$get("/api/request/itr/comp/words/detail", { params: request }).then(function (res) {
          // console.log(res, '文档')
          that.downMap[num] = res.page || true
          that.$forceUpdate()

        })
      }

    },

  },
  created () {
    if (this.$route.name !== 'ChatBarShare') { // 这个授权只是在工作台时候授权
      wxxx()
      console.log('打印成果了哥们')

    };
  },
  mounted () { },
};
</script>
<style lang="less" scoped>
.card-s {
  margin: 10px;
  // padding: 0.333rem;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  position: relative;
  font-size: 0.32rem;
  .button {
    position: absolute;
    top: 0.625rem;
    right: 0.1rem;
    background-color: #1a73e8;
    border-radius: 0.208rem;
    border: 1px solid #fff;
    font-size: 0.075rem;
    color: #fff;
    padding: 0.108rem 0.2rem;
  }
  .title-box {
    display: inline-block;
    padding: 0.337rem;
    padding-right: 0.625rem;
    font-size: 0.283rem;
  }
  .date-box {
    font-size: 0.225rem;
    padding: 0 0 0.217rem 0.217rem;
    color: #aaaaaa;
  }
  .i {
    width: 5px;
    flex-shrink: 0;
    height: 5px;
    border-radius: 50%;
    background-color: #e4881e;
    // margin-top: 5px;
    display: inline-block;
    position: absolute;
    top: 0.38rem;
    left: 0.183rem;
  }
  .item {
    position: relative;
    padding: 0.32rem;
    border-bottom: 1px dashed #eee;
    font-size: 0.29rem;
    .text {
      width: 5.167rem;
      height: 100%;
      // overflow: hidden; //超出一行文字自动隐藏
      // text-overflow: ellipsis; //文字隐藏后添加省略号
      // white-space: nowrap; //强制不换行
    }
    .link {
      // background-color: rgb(250, 215, 224);

      .right-box {
        display: inline-block;
        margin-left: 0.167rem;
        max-width: 4.167rem;
        padding: 4px;
        // background-color: teal;
        div {
          overflow: hidden; //超出一行文字自动隐藏
          text-overflow: ellipsis; //文字隐藏后添加省略号
          white-space: nowrap; //强制不换行
          padding-top: 2px;
        }
        p {
          padding-top: 2px;
          display: inline-block;
          margin-top: 0.168rem;
          font-size: 0.175rem;
          overflow: hidden; //超出一行文字自动隐藏
          text-overflow: ellipsis; //文字隐藏后添加省略号
          white-space: nowrap; //强制不换行
        }
      }
    }
    .right-bottom {
      position: absolute;
      // float: right;
      // margin-top:0.417rem;
      color: #aaaaaa;
      bottom: 0;
      right: 2%;
      font-size: 0.136rem;
    }
  }
  .img {
    width: 0.833rem;
    height: 0.833rem;
    // background-color: #f3a210;
    img {
      width: 100%;
      // height: 100%;
      // transform: scale(0.5); //缩小0.5倍
      // -ms-transform: scale(0.5);
      // -webkit-transform: scale(0.5);
      // -o-transform: scale(0.5);
      // -moz-transform: scale(0.5);
    }
  }
  .last-box {
    display: inline-block;
    position: absolute;
    right: 0.167rem;
    top: 0.167rem;
  }
}
</style>
<style lang="less" scoped>
.verbalView {
  background: #eee;
  font-size: 0.32rem;
  padding-top: 90px;
  .card {
    margin: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    position: relative;
    .line2 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .title {
      font-size: 0.29rem;
      font-weight: 500;
      // display: flex;
      // flex-direction: row;
      // line-height: 30px;
      padding: 0.2rem 0.3rem 0;
      margin-bottom: 3px;
    }
    .footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 0.3rem 0.3rem 0.3rem;
      color: #aaa;
      margin-right: 20px;
      font-size: 0.26rem;
    }
    .other {
      position: absolute;
      bottom: 5px;
      right: 10px;
      height: 30px;
      width: 60px;
      color: #aaa;
      font-size: 0.26rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .shareText {
      font-size: 0.24rem;
      white-space: nowrap;
    }
  }
  /deep/ .van-field__body textarea {
    // border: 1px solid #848383;
    background: #eee;
    border-radius: 10px;
    padding: 0 5px;
  }
  .editBtn {
    position: absolute;
    left: 50%;
    bottom: 25px;
    width: 90%;
    transform: translate(-50%);
  }
  .topState {
    width: 0.6rem;
    background: #f3a210;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 4px 4px;
    border-radius: 5px;
    display: inline-block;
    line-height: 12px;
    margin-right: 0.1rem;
    vertical-align: bottom;
  }
  .yqsb {
    display: flex;
  }
  .miaos {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 10px 0;
    line-height: 0.4rem;
    padding: 0rem 0.3rem 0;

    font-size: 0.26rem;
  }
  .miaosadsa {
    line-height: 20px;
    word-break: break-all;
    font-size: 0.29rem;
    font-weight: 500;
  }
  /deep/ .van-field__body {
    height: 100%;
    textarea {
      height: 100%;
    }
  }
}
</style>